<script setup lang="ts">
import { ListenerProp } from '@varlet/ui';
import { defineComponent } from 'vue';


defineComponent({ name: 'ModalError' });
defineProps<{
    show?: boolean;
    title?: string;
    content?: string;
    /**
     * 隐藏确认按钮
     */
    hideOk?: boolean;
    /**
     * 确认按钮文字
     */
    okText?: string;
    /**
     * 确认按钮事件
     */
    onOk?: ListenerProp<($event: any) => void>;
    /**
     * 隐藏取消按钮
     */
    hideCancel?: boolean;
    /**
     * 显示按钮文字
     */
    cancelText?: string;
    /**
     * 取消按钮事件
     */
    onCancel?: ListenerProp<() => void>;
    /**
     * 关闭按钮事件
     */
    onClose?: ListenerProp<() => void>;
    onClickOverlay?: ListenerProp<() => void>;
    'onUpdate:show'?: ListenerProp<(show: boolean) => void>;
}>();

// 定义外部事件
const emit = defineEmits(['update:show', 'close', 'cancel', 'ok']);

const onClose = () => {
    emit('close');
    emit('update:show', false);
};
const onOk = () => {
    emit('ok');
    emit('update:show', false);
};
const onCancel = () => {
    emit('cancel');
    emit('update:show', false);
};
</script>
<template>
    <var-popup class="popup-tips-box" :show="show" @close="onClose" @click-overlay="onClose" teleport="body">
        <var-result class="result-box" type="question">
            <template #image>
                <div>
                </div>
            </template>
            <template #description>
                <div class="title">
                    <span v-if="title">{{ title }}</span>
                    <slot name="title"></slot>
                </div>
                <div class="content">
                    <span v-if="content">{{ content }}</span>
                    <slot name="content"></slot>
                </div>
            </template>
            <template #footer>
                <var-space class="footer" direction="column" size="20">
                    <!-- 确认按钮 -->
                    <LargePrimaryButton v-if="!hideOk" block @click.stop="onOk">{{ okText || $t('ok_upper') }}
                    </LargePrimaryButton>
                    <!-- 取消按钮 -->
                    <LargePrimaryBorderButton block v-if="!hideCancel" @click.stop="onCancel">{{ cancelText ||
                        $t('cancel') }}
                    </LargePrimaryBorderButton>
                </var-space>
            </template>
        </var-result>
    </var-popup>
</template>
<style lang="scss" scoped>
.popup-tips-box {
    .result-box {
        max-height: 80vh;
        width: 88vw;
        padding: 50px 45px 30px;
        overflow: hidden auto;
        border-radius: 10px;

        .question-img {
            height: 146px;
            width: 146px;
        }

        .title {
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            margin-bottom: 17px;
        }

        .content {
            line-height: 40px;
            word-break: break-word;
            color: $text-sub;
        }

        .footer {
            width: 564px;
        }
    }
}
</style>
<style lang="scss">
.popup-tips-box {
    border-radius: 10px;
}
</style>
